<!-- 空间页 -->
<script setup lang="ts">
import {useRouter, useRoute} from 'vue-router'
import {Search} from '@element-plus/icons-vue'
import type {TabsPaneContext} from 'element-plus'
import {Server} from '@/stores/ajax'
import {GetUserState} from '@/stores/userState';
import HeaderVue from '@/components/Header.vue'
import FooterVue from '@/components/Footer.vue'
import PostList from '@/components/bbs/postList1.vue'
import {nextTick, onActivated, watch, ref} from 'vue'
import {ServerUtils} from '@/serverUtils';
import {random} from 'lodash';
import {format as timeFormat} from 'silly-datetime'

let route = useRoute()
let router = useRouter()
let spaceUid = Number(route.params['userid'])

let loginUser = GetUserState()
let loading = ref(true)
let isMe = () => {
    return loginUser.uid && loginUser.uid == spaceUid
}
let user: any = ref(null)
const checkUser = async () => {
    loading.value = true
    user.value = await ServerUtils.getUserDataById(spaceUid, true)
    if(isMe()){
        Object.assign(user.value,loginUser)
        console.log(user.value)
    }
    console.log(user.value.fans)
    loading.value = false
}
watch(loginUser, checkUser)
checkUser()
let activeName = $ref("star_tap")
let posts = ref<any>([])
const handleChangeTap = async (tab: TabsPaneContext, event: Event) => {
    
}
function padding0(num: string, length: number) {
    num = String(num)
    for (var len = (num + "").length; len < length; len = num.length) {
        num = "0" + num;
    }
    return num;
}
const hasFollowed = () => {
    return loginUser.uid && user.value?.fans?.includes(String(loginUser.uid))
}
const handleFollow = async () => {
    if (loginUser.uid)
        await ServerUtils.changeUserRelative(spaceUid, 'follow', !hasFollowed());
    (loginUser as any).change = random(true)
}
const starPostCallback = async (page: number, posts_per_page: number) => {
    return ServerUtils.getPostByRelationship(spaceUid, page, posts_per_page, [], 'star')
}
const collectPostCallback = async (page: number, posts_per_page: number) => {
    return ServerUtils.getPostByRelationship(spaceUid, page, posts_per_page, [], 'collect')
}
const votePostCallback = async (page: number, posts_per_page: number) => {
    return ServerUtils.getPostByRelationship(spaceUid, page, posts_per_page, [], 'vote')
}
const publishPostCallback = async (page: number, posts_per_page: number) => {
    return ServerUtils.getPosts(null,null,spaceUid, [],page, posts_per_page)
}
const handleSendMessage = ()=>{
    router.push({path:'/notice',query:{chat:spaceUid}})
}
const handleSetting = ()=>{
    router.push({path:'/mySettings'})
}
</script>

<template>
    <header>
        <HeaderVue />
    </header>
    <el-container class="_container"
        v-if="user && user.uid">
        <div class="fh space-banner" style="">
            <div class="top-block">
                <div class="m1" style="">
                    <el-button class="b1" color="#fff0">
                        更换签名图</el-button>
                </div>
            </div>
        </div>
        <div class="main-block">
            <div class="profile-card card">
                <div class="profile-main fvs">
                    <div class="fhs"
                        style="flex-wrap: nowrap;">
                        <div class="profile-avatar">
                            <el-avatar class='hp'
                                :src="Server.fileBaseURL + user.avatar"
                                :size="90" />
                        </div>
                        <div class="fvs left-ava">
                            <div class="user-name">
                                {{ user.user_name}}
                            </div>
                            <div class="signature">
                                {{ user.signature || "这个用户很懒，什么都没写啊啊啊"}}
                            </div>
                        </div>
                    </div>
                    <el-collapse
                        style="border-width: 0;transform: translateY(0px);">

                        <el-collapse-item>
                            <template #title>
                                <div
                                    style="color: #ccc;
                                    flex-grow: 1;text-align: right;">
                                    查看详细信息</div>
                            </template>
                            <el-descriptions column="2">
                                <el-descriptions-item
                                    label="姓名"
                                    min-width="120px">
                                    {{user.name || '已隐藏'}}
                                </el-descriptions-item>
                                <el-descriptions-item
                                    label="班级"
                                    min-width="120px">
                                    {{user.college_class  || '已隐藏'}}
                                </el-descriptions-item>
                                <el-descriptions-item
                                    label="邮箱">
                                    {{user.email  || '已隐藏'}}
                                </el-descriptions-item>
                                <!-- <el-descriptions-item label="学号"> -->
                                <!--     <el-tag size="small">School</el-tag> -->
                                <!-- </el-descriptions-item> -->
                            </el-descriptions>
                        </el-collapse-item>
                    </el-collapse>

                    <div class="fh score-block">
                        <div class="fvs score-item">
                            <span
                                class="score-title">被关注</span>
                            <span class="score-num">{{
                                    padding0(user.fans?.length
                                        || 0,
                                        3)
                            }}</span>
                        </div>
                        <div class="fvs score-item">
                            <span
                                class="score-title">被点赞</span>
                            <span class="score-num">{{
                                    padding0(user.achievement?.star_count
                                        || 0,
                                        3)
                            }}</span>
                        </div>
                        <div class="fvs score-item">
                            <span
                                class="score-title">被收藏</span>
                            <span class="score-num">{{
                                    padding0(user.achievement?.collect_count
                                        || 0,
                                        3)
                            }}</span>
                        </div>
                    </div>
                    <div class="button-block"
                        v-if="!isMe()">
                        <el-button color="#6666cc"
                            @click="handleFollow()">
                            <div
                                :class="hasFollowed() ? 'b3' : 'b2'">
                                {{ hasFollowed() ? '已' :
                                        ''
                                }}关注
                            </div>
                        </el-button>
                        <el-button class="b2" @click='handleSendMessage'
                            color="#6666cc" plain>
                            私信
                        </el-button>
                    </div>
                    <div v-else class="button-block">
                        <el-button color="#6666cc" @click='handleSetting'
                            >
                            设置资料
                        </el-button>
                    </div>
                    <div class="recent-visited"
                        v-if='false'>
                        <div class="label1">
                            最近访问
                        </div>
                        <div class="fhs"
                            style="flex-wrap: wrap;gap:12px">
                            <div v-for="i in 10">
                                <el-avatar :size="45" />
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="record-card card">
                <el-tabs v-model="activeName"
                    class="demo-tabs"
                    @tab-click="handleChangeTap">
                    <el-tab-pane label="已赞内容"
                        name="star_tap" lazy>
                        <PostList :postCallback='starPostCallback' />
                    </el-tab-pane>
                    <el-tab-pane label="发布内容"
                        name="publish_tap" lazy>
                        <PostList :postCallback='publishPostCallback' />
                        </el-tab-pane>
                    <el-tab-pane label="投票内容"
                        name="vote_tap" lazy>
                        <PostList :postCallback='votePostCallback' />
                        </el-tab-pane>
                    <el-tab-pane label="收藏内容"
                        name="colloct_tap" lazy>
                        <PostList :postCallback='collectPostCallback' />
                        </el-tab-pane>
                </el-tabs>
            </div>
        </div>

    </el-container>
    <div class="no_user" v-else-if="!loading">
        无此用户！！</div>
    <el-skeleton v-else :rows="5" animated />

</template>

<style scoped lang="scss">
$core-width : 1080px;

._container {
    flex-direction: column;
    align-items: center;
    height: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.space-banner {
    width: 100%;
    min-width: 1080px;
    background-image: url(space-banner.png);
    background-position: center;
}

.top-block {
    width: $core-width;
    height: 220px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;

    .m1 {
        grid-column-end: 13;
        justify-self: end;
        margin-top: 30px;

        .b1 {
            font-size: 18px;
            color: #fffa;
            border: 1px solid #fffa;
        }
    }
}

.main-block {
    width: $core-width;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;
    transform: translateY(-75px);

    .card {
        border-radius: 8px;
        background: #fffb;
        filter: drop-shadow(0px 0px 10px #ffffff0f);
        box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 30%) inset, 0 0.5em 1em rgb(0 0 0 / 2%);
        backdrop-filter: blur(5px);
    }

    .profile-card {
        grid-column: 1 / 5;
        height: min-content;
        /* height: 200px; */
        column-gap: 20px;
        padding: 25px 30px 30px;

    }

    .left-ava {
        margin-left: 20px;
        margin-top: 20px;
    }

    .user-name {
        font-weight: bold;
        font-size: 20px;
        color: #333333;
    }

    .signature {
        margin-top: 10px;
        font-size: 14px;
        color: #666666;
    }

    .score-block {
        justify-content: space-between;
        padding: 10px 20px 0;

        .score-item {
            align-items: center;
        }

        .score-title {
            font-size: 14px;
            color: #999999;
        }

        .score-num {
            font-size: 24px;
            color: #333333;
            /* font-weight: bolder; */
        }
    }

    .button-block {
        margin: 20px 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        font-size: 20px;

        .b2 {
            font-size: 20px;
            letter-spacing: 20px;
        }

        .b2.b2 {
            text-indent: -20px;
            direction: rtl;
        }


        .b2~.b2 {
            border-width: 2px;
        }

        .b3 {
            font-size: 20px;
            letter-spacing: 10px;
        }

        .b3.b3 {
            text-indent: -10px;
            direction: rtl;
        }
    }

    .recent-visited {
        margin-top: 40px;

        .label1 {
            font-size: 20px;
            font-weight: bolder;
            margin-bottom: 20px;

        }
    }

    .record-card {
        grid-column: 5 / 13;
        /* height: 500px; */
        padding: 20px 35px;
    }
}
</style>
<style lang="scss">
.record-card {
    .el-tabs__active-bar {
        height: 6px;
        background-color: var(--main-color);
    }

    /* :root{ */
    /* --el-menu-active-color:red; */
    /* --el-menu-hover-text-color:red; */
    /* } */
    .el-tabs__nav {
        /* transform: scale(1.5); */
        padding: 4px 0 12px;
    }

    .el-tabs__item {
        font-size: 20px;

    }

    .el-tabs__nav .is-active {
        color: var(--main-color);
    }

    .el-tabs__item:hover {
        color: var(--main-color) !important;
    }

    .el-collapse-item__header {
        background-color: #fff0;
    }

    .el-collapse-item__content {
        padding-bottom: 0px;
    }

    .el-descriptions__label {
        padding: 0 !important;
        color: #999 !important;
    }

    .el-descriptions__content {
        font-weight: bolder !important;
    }
}
</style>

